<?
include("session.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/webkit/utils/jquery.js"></script>
<script type="text/javascript" src="/webkit/dialog/import.js"></script>
<script type="text/javascript" src="/webkit/datepicker/WdatePicker.js"></script>
<script type="text/javascript" src="/webkit/charts/import.js"></script>
<link type="text/css" rel="stylesheet" href="page.css"/>
<style>	input {vertical-align:middle} </style>
</head>
<body onload="show_report_charts()">

<table width=100% height=100% cellspacing=0 cellpadding=0>
	<tr bgcolor="#eeeeee">
	<form name=f>
	<td height=30>&nbsp;
    时间范围：<input type="text" value="" id="date_start" name="date_start" onClick="WdatePicker({readOnly:true, skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" size="10"> - <input type="text" value="" id="date_end" name="date_end" onClick="WdatePicker({readOnly:true, skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" size="10">　
	<input type="button" value="图表统计" onclick="show_report_charts()">
    </td>
	</tr>
	<tr>
	<td>
		<table width=100% height=100% id="chartsTable">
		<tr><td id="chartContainer1" width=50% height=50%></td><td id="chartContainer2"  width=50% height=50%></td></tr>
		<tr><td id="chartContainer3" width=50% height=50%></td><td id="chartContainer4"></td></tr>
		</table>
	</td>
	</form>
	</tr>
</table>

<script type="text/javascript">

	var taskChart = new FusionCharts("/webkit/charts/Pie3D.swf",  "taskChart", "100%", "100%", "0", "1" );     
	var callChart = new FusionCharts("/webkit/charts/Pie3D.swf",  "callChart", "100%", "100%", "0", "1" );     
	var lineChart = new FusionCharts("/webkit/charts/Line.swf",  "lineChart", "100%", "100%", "0", "1" );   
	var top5Report = new FusionCharts("/webkit/charts/MSColumn3D.swf", "top5Report", "100%", "100%", "0", "1"); 
	
	function show_report_charts() {
		$.get("report_query.php?action=task_report"+ get_date_range(), function(data){
			eval("var json = "+data);
			taskChart.setJSONData(json);
			taskChart.render('chartContainer1');  
		});

		$.get("report_query.php?action=call_report"+ get_date_range(), function(data){
			eval("var json = "+data);
			callChart.setJSONData(json);
			callChart.render('chartContainer2');  
		});

		$.get("report_query.php?action=task_top5_report"+ get_date_range(), function(data){
			//alert(data)
			//eval("var json = "+data);
			//top5Report.setJSONData(json);
			top5Report.setDataXML(data);
			top5Report.render('chartContainer3');  
		});

		$.get("report_query.php?action=call_top5_report"+ get_date_range(), function(data){
			eval("var json = "+data);
			lineChart.setJSONData(json);
			lineChart.render('chartContainer4');  
		});
	}

	function get_date_range() {
		if($("#date_start").val()!="" && $("#date_end").val()!="") {
			return "&date_range="+ $("#date_start").val() + "_" + $("#date_end").val();
		}
		return "";
	}


</script>
</body>
</html>
